<template>
  <div>
    <div class="ele-table-tool ele-table-tool-default el-intelirri-p">
      <p>
        总袋数：
        <b>{{ bloods }}</b>
      </p>
      <p>
        总血量：
        <b>{{ bloodCapacity }}</b>
      </p>
      <p v-if="bloodTypeName">
        血液成分：
        <b>{{ bloodTypeName }}</b>
      </p>
      <p v-if="bloodGroup">
        血型：
        <b>{{ bloodGroup }}</b>
      </p>
    </div>
    <el-table
      v-loading="listLoading"
      border
      :data="listData"
      :height="height"
      :row-class-name="getRowClassName"
      stripe
      @row-dblclick="detail"
    >
      <el-table-column align="center" label="编号" type="index" width="60" />
      <el-table-column
        align="center"
        label="血型"
        prop="bloodGroup"
        show-overflow-tooltip
        width="60"
      />
      <el-table-column align="center" label="RHD" prop="RH" width="60" />
      <el-table-column
        align="center"
        label="血袋号"
        prop="BLOOD_ID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="捐血者"
        prop="BLOOD_DONOR_ID"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        align="center"
        label="用血申请单号"
        prop="APPLY_NUM"
        show-overflow-tooltip
        width="100"
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY_NUM') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="科室"
        prop="APPLY_DEPT_NAME"
        show-overflow-tooltip
        width="100"
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY_DEPT_NAME') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="受血者"
        prop="APPLY_PAT_NAME"
        show-overflow-tooltip
        width="100"
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY_PAT_NAME') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="门诊号"
        prop="APPLY PATIENT ID"
        show-overflow-tooltip
        width="90"
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY_PATIENT_ID') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="住院号"
        prop="APPLY INP NO"
        show-overflow-tooltip
        width="90"
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY INP NO') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="诊断"
        prop="APPLY_RELEVANT_CLINIC_DIAG"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ getAttr(scope.row, 'APPLY_RELEVANT_CLINIC_DIAG') }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="血量(U)"
        prop="BLOOD_CAPACITY"
        width="70"
      />
      <el-table-column
        align="center"
        label="血液成分"
        prop="bloodTypeName"
        show-overflow-tooltip
        width="120"
      />
      <!-- <el-table-column align="center" label="入库时间" prop="created_at" /> -->
      <el-table-column
        align="center"
        label="采血日期"
        prop="BLOOD_GATHER_DATE"
        show-overflow-tooltip
        width="90"
      >
        <template #default="scope">
          {{ substr(scope.row.BLOOD_GATHER_DATE) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="失效日期"
        prop="INVAL_DATE"
        show-overflow-tooltip
        width="90"
      >
        <template #default="scope">
          {{ substr(scope.row.INVAL_DATE) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="过期时间"
        prop="INVAL_DATE"
        width="125"
      >
        <template #default="scope">
          <el-tag
            :type="
              getInvalidDayClass(scope.row.INVAL_DATE, scope.row.CURRENT_TIME)
            "
          >
            {{ getInvalidDay(scope.row.INVAL_DATE, scope.row.CURRENT_TIME) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="血液来源"
        prop="BLOOD_SOURCE"
        show-overflow-tooltip
        width="80"
      />
      <el-table-column
        v-if="systemSet.recheckable"
        align="center"
        fixed="right"
        label="复检状态"
        prop="BLOOD_OUT_STATUS"
        width="100"
      >
        <template #default="scope">
          <el-tag :type="getRecheckStatus(scope.row, 'type')">
            {{ getRecheckStatus(scope.row, 'name') }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { substr, getAttr, getDiffDays } from '@/utils'
  import { mapGetters } from 'vuex'
  export default {
    props: {
      listLoading: {
        type: Boolean,
        default() {
          return true
        },
      },
      listData: {
        type: Array,
        default() {
          return []
        },
      },
      bloodGroup: {
        type: String,
        default() {
          return ''
        },
      },
      bloodTypeName: {
        type: String,
        default() {
          return ''
        },
      },
    },
    data() {
      return {
        height: 'calc(100vh - 388px)',
        bloodCapacity: 0,
        bloods: 0,
      }
    },
    computed: {
      ...mapGetters({ systemSet: 'initialData/systemSet' }),
    },
    watch: {
      listData: {
        handler(newVal) {
          this.bloods = newVal ? newVal.length : 0
          this.bloodCapacity = newVal
            ? newVal.reduce((total, currentValue) => {
                return total + +currentValue.BLOOD_CAPACITY
              }, 0)
            : 0
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      detail(row) {
        this.$emit('detail', row)
      },
      getRecheckStatus(row, attr) {
        if (row.BLOOD_RECHECK) {
          const map = {
            '-1': { name: '未通过', type: 'danger' },
            0: { name: '未复检', type: 'warning' },
            1: { name: '通过', type: 'success' },
          }
          const res = map[row.BLOOD_RECHECK.RECHECK_STATUS || 0]
          return res[attr]
        }
        return {
          name: '无复检信息',
          type: 'danger',
        }[attr]
      },
      recheck(row) {
        this.$confirm('确定要将该血液设置为复检通过吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$emit('recheck', row)
          })
          .catch(() => {
            console.log('cancel')
          })
      },
      changeCurrentPage(val) {
        this.$emit('changeCurrentPage', val)
      },
      changePagesize(val) {
        this.$emit('changePagesize', val)
      },
      substr(str) {
        return substr(str, 0, 10)
      },
      getAttr(formData, field) {
        return getAttr(formData, field)
      },
      getRowClassName(e) {
        const recheck_status = e.row.recheck_status
        return +recheck_status > 0 ? '' : 'color-danger'
      },
      getInvalidDay(invalid_time, current_time) {
        const { days, hours, mins } = getDiffDays(invalid_time, current_time)
        return `${days}天${hours}时${mins}分`
      },
      getInvalidDayClass(invalid_time, current_time) {
        const { days } = getDiffDays(invalid_time, current_time)
        if (days < this.systemSet.blood_invalid_days) {
          return 'danger'
        }
        return 'success'
      },
    },
  }
</script>

<style lang="scss" scoped>
  .el-intelirri-p {
    padding: 16px 12px;
    p {
      margin-block-start: 0;
      margin-block-end: 0;
      margin-right: 24px;
      font-size: 14px;
    }
  }
</style>
